<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown编辑器 - 源三岁</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="markdown-editor.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>源三岁</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li class="dropdown">
                        <a href="#tools">小工具集合</a>
                        <div class="dropdown-content">
                            <a href="sample-size.html">样本量计算器</a>
                            <a href="markdown-editor.html">Markdown编辑器</a>
                            <a href="#tool3">工具3</a>
                        </div>
                    </li>
                    <li>
                        <button class="theme-toggle" id="themeToggle">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
                            </svg>
                            <span>切换主题</span>
                        </button>
                    </li>
                </ul>
            </nav>
        </header>
        
        <main class="markdown-container">
            <h2>Markdown编辑器</h2>
            <p class="description">
                这是一个简单易用的在线Markdown编辑器，您可以在左侧编辑Markdown文本，右侧会实时预览渲染后的效果。
            </p>
            
            <div class="editor-container">
                <div class="toolbar">
                    <button id="btn-bold" title="粗体 (Ctrl+B)">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
                            <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
                        </svg>
                    </button>
                    <button id="btn-italic" title="斜体 (Ctrl+I)">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <line x1="19" y1="4" x2="10" y2="4"></line>
                            <line x1="14" y1="20" x2="5" y2="20"></line>
                            <line x1="15" y1="4" x2="9" y2="20"></line>
                        </svg>
                    </button>
                    <button id="btn-heading" title="标题 (Ctrl+H)">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <path d="M3 7v10M8 7v10M3 12h10M15 7h6M15 12h6M15 17h6"></path>
                        </svg>
                    </button>
                    <button id="btn-link" title="链接 (Ctrl+K)">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                        </svg>
                    </button>
                    <button id="btn-image" title="图片">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
                            <polyline points="21 15 16 10 5 21"></polyline>
                        </svg>
                    </button>
                    <button id="btn-list" title="无序列表">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <line x1="8" y1="6" x2="21" y2="6"></line>
                            <line x1="8" y1="12" x2="21" y2="12"></line>
                            <line x1="8" y1="18" x2="21" y2="18"></line>
                            <line x1="3" y1="6" x2="3.01" y2="6"></line>
                            <line x1="3" y1="12" x2="3.01" y2="12"></line>
                            <line x1="3" y1="18" x2="3.01" y2="18"></line>
                        </svg>
                    </button>
                    <button id="btn-ordered-list" title="有序列表">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <line x1="10" y1="6" x2="21" y2="6"></line>
                            <line x1="10" y1="12" x2="21" y2="12"></line>
                            <line x1="10" y1="18" x2="21" y2="18"></line>
                            <text x="3" y="8" font-size="6" fill="currentColor">1</text>
                            <text x="3" y="14" font-size="6" fill="currentColor">2</text>
                            <text x="3" y="20" font-size="6" fill="currentColor">3</text>
                        </svg>
                    </button>
                    <button id="btn-table" title="表格">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="3" y1="9" x2="21" y2="9"></line>
                            <line x1="3" y1="15" x2="21" y2="15"></line>
                            <line x1="9" y1="3" x2="9" y2="21"></line>
                            <line x1="15" y1="3" x2="15" y2="21"></line>
                        </svg>
                    </button>
                    <button id="btn-code" title="代码">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">
                            <polyline points="16 18 22 12 16 6"></polyline>
                            <polyline points="8 6 2 12 8 18"></polyline>
                        </svg>
                    </button>
                </div>
                
                <div class="editor-wrapper">
                    <div class="editor-section">
                        <h3>编辑</h3>
                        <textarea id="markdown-input" placeholder="在这里输入Markdown文本..."></textarea>
                    </div>
                    
                    <div class="preview-section">
                        <h3>预览</h3>
                        <div id="markdown-preview" class="markdown-body"></div>
                    </div>
                </div>
                
                <div class="actions">
                    <button id="btn-copy" class="action-btn">复制HTML</button>
                    <button id="btn-download-md" class="action-btn">下载Markdown</button>
                    <button id="btn-download-html" class="action-btn">下载HTML</button>
                    <button id="btn-clear" class="action-btn warning">清空编辑器</button>
                </div>
            </div>
            
            <div class="markdown-guide">
                <h3>Markdown快速指南</h3>
                <div class="guide-grid">
                    <div class="guide-item">
                        <div class="syntax"># 标题</div>
                        <div class="description">一级标题（更多#表示更小级别）</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">**粗体**</div>
                        <div class="description">粗体文本</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">*斜体*</div>
                        <div class="description">斜体文本</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">[链接](http://example.com)</div>
                        <div class="description">超链接</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">![替代文本](图片URL)</div>
                        <div class="description">图片</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">- 列表项</div>
                        <div class="description">无序列表</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">1. 列表项</div>
                        <div class="description">有序列表</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">```代码块```</div>
                        <div class="description">代码块</div>
                    </div>
                    <div class="guide-item">
                        <div class="syntax">| 标题1 | 标题2 |\n|-------|-------|\n| 单元格1 | 单元格2 |</div>
                        <div class="description">表格</div>
                    </div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>&copy; 2024 源三岁. All rights reserved.</p>
        </footer>
    </div>
    
    <script src="markdown-editor.js"></script>
</body>
</html> 